<template>
    <div class="view-main" :style="[{'margin-top': margin + 'px'}, {'margin-bottom': margin + 'px'}]">
    <div class="viewcount-container" :style="[{'backgroundColor': bgColor}, {'borderRadius': radius + 'px'}, {'padding': padding + 'px'}, {'fontSize': fontSize + 'px'}]">
        <div class="avatar-group">
            <div v-for="i in avatarCount" :key="i" class="avatar" :style="[{'width': avatarSize + 'px'}, {'height': avatarSize + 'px'}, {'backgroundColor': getAvatarColor(i)}]"></div>
        </div>
        <div class="stats-group">
            <span class="stat-item stat-view" :style="[{'color': textColor}]">浏览量{{ viewCount }}</span>
            <span class="stat-item" :style="[{'color': textColor}]">今日+{{ todayViewCount }}</span>
            <span class="stat-item like-item" :style="[{'color': textColor}, {'margin-left': 'auto'}]">靠谱 {{ likeCount }}<span class="like-icon iconfont iconshipindianzan-weidian" :style="[{'color': likeColor}]"></span></span>
        </div>
    </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'card_viewcount',
    cname: '浏览量组件',
    configName: 'c_card_viewcount',
    icon: 'iconshouyintai-yanjing',
    type: 3,
    defaultName: 'cardView',
    props: {
        index: { type: null },
        num: { type: null }
    },
    computed: {
        ...mapState('mobildConfig', ['defaultArray'])
    },
    watch: {
        pageData: {
            handler(nVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num(nVal) {
            const data = this.defaultArray[nVal]
            this.setConfig(data)
        },
        'defaultArray': {
            handler() {
                const data = this.defaultArray[this.num]
                this.setConfig(data)
            },
            deep: true
        },
        defaultConfig: {
            handler(nVal) {
                this.setConfig(nVal)
            },
            deep: true
        }
    },
    data() {
        return {
            defaultConfig: {
                name: 'cardView',
                timestamp: this.num,
                setUp: {
                    tabVal: '0'
                },
                // 内容设置
                viewCount: {
                    title: '总浏览量',
                    val: 2000,
                    min: 0,
                    max: 999999
                },
                todayViewCount: {
                    title: '今日浏览量',
                    val: 10,
                    min: 0,
                    max: 9999
                },
                likeCount: {
                    title: '点赞量',
                    val: 50,
                    min: 0,
                    max: 9999
                },
                avatarCount: {
                    title: '头像数量',
                    val: 3,
                    min: 1,
                    max: 10
                },
                // 样式设置
                bgColor: {
                    title: '背景颜色',
                    default: [{ item: '#f6f6f6' }],
                    color: [{ item: '#f6f6f6' }]
                },
                textColor: {
                    title: '文字颜色',
                    default: [{ item: '#333333' }],
                    color: [{ item: '#333333' }]
                },
                radius: {
                    title: '圆角大小',
                    val: 20,
                    min: 0,
                    max: 20
                },
                padding: {
                    title: '内边距',
                    val: 6,
                    min: 0,
                    max: 30
                },
                fontSize: {
                    title: '文字大小',
                    val: 14,
                    min: 10,
                    max: 20
                },
                avatarSize: {
                    title: '头像大小',
                    val: 32,
                    min: 16,
                    max: 40
                },
                margin: {
            title: '页面边距',
            val: 0,
            min: 0,
            max: 30
        },
        likeColor: {
            title: '点赞图标颜色',
            default: [{ item: '#1E88E5' }],
            color: [{ item: '#1E88E5' }]
        }
            },
            pageData: {},
            viewCount: 2000,
            todayViewCount: 10,
            likeCount: 50,
            avatarCount: 3,
            bgColor: '#f5f5f5',
            textColor: '#333333',
            radius: 8,
            padding: 10,
            fontSize: 14,
            avatarSize: 24,
            margin: 0,
            likeColor: '#1E88E5'
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.pageData = this.defaultArray[this.num] || this.defaultConfig
            this.setConfig(this.pageData)
        })
    },
    methods: {
        setConfig(data) {
            if (!data) return
            
            // 处理内容设置
            this.viewCount = data.viewCount.val || 2000
            this.todayViewCount = data.todayViewCount.val || 10
            this.likeCount = data.likeCount.val || 50
            this.avatarCount = data.avatarCount.val || 3
            
            // 处理样式设置
            this.bgColor = data.bgColor.color[0].item || '#f5f5f5'
            this.textColor = data.textColor.color[0].item || '#333333'
            this.radius = data.radius.val || 8
            this.padding = data.padding.val || 10
            this.fontSize = data.fontSize.val || 14
            this.avatarSize = data.avatarSize.val || 24
            this.margin = data.margin.val || 0
            this.likeColor = data.likeColor.color[0].item || '#1E88E5'
        },
        getAvatarColor(index) {
            // 生成不同颜色的头像
            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F08080', '#87CEFA', '#90EE90', '#FFB6C1', '#DDA0DD'];
            return colors[index % colors.length];
        }
    }
}
</script>

<style scoped lang="scss">
.view-main{
    background-color: transparent;
    border-radius: 8px;
    padding: 10px;
}
.viewcount-container {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    .avatar-group {
        display: flex;
        margin-right: 16px;
        font-weight: bold;
        .avatar {
            border-radius: 50%;
            margin-right: -18px;
            border: 2px solid white;
        }
    }

    .stats-group {
        display: flex;
        justify-content: flex-start;
        gap: 15px;
        margin-left: 5px;
        width: 100%;
        .stat-item {
            display: flex;
            align-items: center;
        }
        .stat-view{
                font-size: 16px;
                font-weight: bold;
        }
        .like-item {
            .like-icon {
                margin-left: 4px;
                font-size: 19px;
            }
        }
    }
}
</style>